<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Our Love Story</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
    @font-face {
      font-family: digit;
      src: url('digital-7_mono.ttf') format("truetype");
    }
  </style>
  <link href="css/style.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="../../vendors/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/garden_dev.js"></script>
  <script type="text/javascript" src="js/functions_dev.js"></script>
</head>

<body>
  <audio autoplay="autoplay">
    <source src="mp3/Stay With Me.mp3" type="audio/mp3">
  </audio>
  <div id="mainDiv">
    <div id="content">
      <div id="code">
        <span class="comments">/**</span>
        <br />
        <span class="space" />
        <span class="comments">* Look,3     2     1</span>
        <br />
        <span class="space" />
        <span class="comments">* We are both ** university student,</span>
        <br />
        <span class="space" />
        <span class="comments">* so I write some code to celebrate our lost-past.</span>
        <br />
        <span class="space" />
        <span class="comments">*/</span>
        <br /><span class="declaration">Boy</span> i =
        <span class="keyword">new</span> Boy(<span class="string">"**"</span>);
        <br /><span class="declaration">Girl</span> u =
        <span class="keyword">new</span> Girl(<span class="string">"***"</span>);
        <br />
        <br />
        <span class="comments">// Nov 20, 2012, I hugger you all the night On the steps of the campus and I fell in love with you. </span>
        <br /> i.<span class="function">love(<span class="string">u</span>)</span>;
        <br />
        <br />
        <span class="comments">// Luckily, you accepted and became my girlfriend eversince.</span>
        <br /> u.<span class="function">accepted(<span class="string">i</span>)</span>;
        <br />
        <br />
        <span class="comments">// Since then, I miss u every day.</span>
        <br /> i.<span class="function">miss(<span class="string">u</span>)</span>;
        <br />
        <br />
        <span class="comments">// And take care of u and our love.</span>
        <br /> i.<span class="function">takeCareOf(<span class="string">u</span>)</span>;
        <br />
        <br />
        <span class="comments">// You said that you won't be so easy to leave me.</span>
        <br />
        <span class="comments">// So I believe you and I have confidence that you will marry me.</span>
        <br />
        <span class="keyword">boolean</span> isHesitate =
        <span class="keyword">true</span>;
        <br />
        <span class="keyword">while</span> (isHesitate) {
        <br />
        <span class="placeholder" />i.<span class="function">waitFor(<span class="string">u</span>)</span>;
        <br />
        <br />
        <span class="placeholder" />
        <span class="comments">// I think it is an important decision</span>
        <br />
        <span class="placeholder" />
        <span class="comments">// and you should think it over.</span>
        <br />
        <span class="placeholder" />isHesitate = u.<span class="function">thinkOver(<span class="string">u</span>)</span>;
        <br /> }
        <br />
        <span class="comments">// if we have a romantic wedding, we will live happily ever after.</span>
        <br /> i.<span class="function">marry(<span class="string">u</span>)</span>;
        <br /> i.<span class="function">liveHappilyWith(<span class="string">u</span>)</span>;
        <br />
        <span class="comments">// maybe you never come back.It's ok.</span>
        <br /> i.<span class="function">miss(<span class="string">u</span>)</span>;
        <br>
        <span class="comments">// Oh won't you stay with me cos you're all i need.</span>
      </div>
      <div id="loveHeart">
        <canvas id="garden"></canvas>
        <div id="words">
          <div id="messages">
            ***, I have fallen in love with you for
            <div id="elapseClock"></div>
          </div>
          <div id="loveu">
            Love u forever and ever.
            <br/>
            <div class="signature">- jacks</div>
          </div>
        </div>
      </div>
    </div>
    <div id="copyright">
      Inspired by <a href="http://www.openrise.com/lab/FlowerPower/">FlowerPower</a> project.
      <br /> Copyright © 2016 <a href='http://51201314.me'>51201314.me</a> 2015-forever
    </div>
  </div>
  <script type="text/javascript">
    var offsetX = $("#loveHeart").width() / 2;
    var offsetY = $("#loveHeart").height() / 2 - 55;
    var displayMode = 1;
    var together = new Date();
    together.setFullYear(2012, 10, 20);
    together.setHours(20);
    together.setMinutes(0);
    together.setSeconds(0);
    together.setMilliseconds(0);

    $("#loveHeart").click(function() {
      displayMode *= -1;
      timeElapse(together, displayMode);
    });

    if (!document.createElement('canvas').getContext) {
      var msg = document.createElement("div");
      msg.id = "errorMsg";
      msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
      document.body.appendChild(msg);
      $("#code").css("display", "none")
      $("#copyright").css("position", "absolute");
      $("#copyright").css("bottom", "10px");
      document.execCommand("stop");
    } else {
      setTimeout(function() {
        adjustWordsPosition();
        startHeartAnimation();
      }, 5000);

      timeElapse(together, displayMode);
      setInterval(function() {
        timeElapse(together, displayMode);
      }, 500);

      adjustCodePosition();
      $("#code").typewriter();
    }
  </script>
</body>

</html>
